<template>
  <div>
    <div class="container">
      <div class="box p_20">
        <div class="text">
          <el-radio-group v-model="dataJson.stylesType">
            <el-radio :label="0" style="margin-right:10px;">平铺展示</el-radio>
            <el-radio :label="1">滚动字幕</el-radio>
          </el-radio-group>
          <div class="textarea" style="margin-top:10px;">
            <el-input
              v-model="dataJson.content"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 10 }"
              placeholder="请输入内容"
              maxlength="80"
              show-word-limit
            ></el-input>

            <!-- @input="textareaHandle($event)" -->
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="line">
        <div class="left ">背景颜色</div>
        <div class="colorOption">
          <div class="divs">
            {{ dataJson.backgroundColor }}
          </div>

          <el-color-picker
            v-model="dataJson.backgroundColor"
            show-alpha
            size="medium"
            class="colorPicker"
          ></el-color-picker>
        </div>
      </div>
      <div class="line">
        <div class="left ">文字颜色</div>
        <div class="colorOption">
          <div class="divs">
            {{ dataJson.color }}
          </div>

          <el-color-picker
            v-model="dataJson.color"
            show-alpha
            size="medium"
            class="colorPicker"
          ></el-color-picker>
        </div>
      </div>
      <div class="line">
        <div class="left ">文字大小</div>
        <el-select v-model="dataJson.fontSize" placeholder="请选择">
          <el-option
            v-for="item in optionsFont"
            :key="item.value"
            :label="item.value"
            :value="item.value"
            style="padding-left:10px;"
          ></el-option>
        </el-select>
      </div>
      <div v-if="dataJson.stylesType == 1" class="line">
        <div class="left ">文字速度</div>
        <div style="width: 330px;padding-left: 16px;">
          <el-slider
            v-model="dataJson.speed"
            :min="1"
            :max="20"
            show-input
          ></el-slider>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { optionsFont } from "../../data";
export default {
  props: {
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      optionsFont
    };
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/decorate.scss";
</style>
